<template>
  <div style="width: 100%; height: 100%" class="test"> 
    <dv-chart @on-register="start" :fit="true" :options="opts" debug   :register="register" map="china" ></dv-chart>
  <!-- <dv-page target="parent" fit>
    <dv-box style="border:1px solid red" layout :gap="20" left="20px" top="20px" height="calc(100% - 40px)" width="30%">
      <dv-box class="inner" width="100%" :weight="1">
        
      </dv-box>
      <dv-box class="inner" width="100%" :weight="2">
        <dv-chart @on-register="start" :fit="true" :options="opts" debug :install="install" :register="register" map="china" ></dv-chart></dv-box>
    </dv-box>
    
  </dv-page> -->

  <!-- <button @click="test">test / {{zIndex}}</button> -->
  </div> 
    
</template>
<script setup lang="ts" >
import { ref } from 'vue';
// import 'echarts/lib/chart/bar';
import {DvPage, DvChart, DvBox } from '$comp/index';
import china from '$comp/assets/geo/china.json';
// import { MapChart, ScatterChart, LinesChart } from "echarts/charts";  
// import { VisualMapComponent } from 'echarts/components';
 
// const install = [MapChart, ScatterChart, LinesChart] // , VisualMapComponent
const register = ref(china);
const _opts = {
  geo: {
    map: 'china'
  },
  tooltip: {},
  visualMap: {
    bottom: 20,
    calculable: true,
    left: 20,
    max:  110,
    min: 60,
    show: true,
    text: ['高', '低'],
    type: 'continuous'
  }, 
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [
    { 
      type: 'map',
      map: 'china',
      name: '面积',
      z: 2,
      zlevel: 0,
      coordinateSystem: 'geo',
      data: [
        {name: '广东', value: 100},
        {name: '北京', value: 60},
        {name: '广西', value: 78},
        {name: '湖南', value: 90},
        {name: '湖北', value: 110},
        {name: '福建', value: 87},
        {name: '新疆', value: 90},
        {name: '贵州', value: 75},
        {name: '江苏', value: 63},
        {name: '山西', value: 80},
        {name: '山东', value: 90},
        {name: '黑龙江', value: 105}
      ]
    }, 
    { 
      coordinateSystem: 'geo', 
      geoIndex: 0,
      lineStyle: {
        color: 'red',
        width: 4,
      },
      name: '航线',
      type: 'lines',
      z: 3,
      zlevel: 3,
      data: [
        {name: '广东->北京', coords: [[113.280637, 23.125178], [116.405285, 39.904989]]},
        {name: '湖南->北京', coords: [[111.782279, 28.09409], [116.405285, 39.904989]]},
        {name: '贵州->北京', coords: [[106.713478, 26.578343], [116.405285, 39.904989]]},
        {name: '新疆->北京', coords: [[85.617733, 40.792818], [116.405285, 39.904989]]},
        {name: '西藏->北京', coords: [[89.132212, 30.860361], [116.405285, 39.904989]]}
      ]
    }, 
    // { type: 'bar' }
  ]
};
const data = JSON.parse(JSON.stringify(_opts))
const opts = ref({...data})

const start = (chart) => {
  console.log('start', chart)
}

  // const test = () => {
  //   console.log('before change')
  //   _opts.series[0].data = [0, 0, 0, 0, 0, 0]
  //   opts.value = JSON.parse(JSON.stringify(_opts))
  //   console.log(opts.value)
  // }
</script>
<style lang="scss" scoped>.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
   background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
